<template>
	<view>
		<view class="client-list-range fillx frcc bsp10 t-bb-u">
			<u-search 
				placeholder="姓名/手机号" 
				v-model="keyword" 
				:clearabled="true" 
				:animation="true" 
				bg-color="#eeeeee" 
				shape="square"
				border-color="#dddddd"
				@search="toSearch" 
				@custom="toSearch"
				>
			</u-search>
		</view>
		<view class="client-list-content fillx fcss">
			<view class="client-item fillx frcc" v-for="item in showList" :key="item.id">
				<image class="client-item-img" :src="item.head_portrait?item.head_portrait:'../../../static/logo_abf.png'" mode="scaleToFill" @click="goClientDetail(item)"></image>
				<view class="client-item-message fcss">
					<view class="client-item-message-name fillx frsc">
						{{item.nickname}}
					</view>
					<view class="client-item-message-register-wrap fillx frcc">
						<text class="my_fcolor" @click="call(item.mobile)">{{item.mobile}}</text>
						<text class="client-item-message-register-time">{{item.created_at}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty class="client-list-empty" text="没有搜索结果" mode="search" :show="isShowEmpty"></u-empty>
		<uni-load-more :status="loadMore_status"></uni-load-more>
		<u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up" tips="顶部"></u-back-top>
	</view>
</template>

<script>
	import {
	      mapState,
	      mapMutations
	  } from 'vuex'
	import uniLoadMore from "@/components/uni-ui/uni-load-more/uni-load-more.vue"	
	
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				chooseMarket: 1,
				keyword: '',
				clientList: [],
				level_sort: true,
				register_sort: true,
				showList: [],
				isSearch: false,
				searchList: [],
				isShowEmpty: false,
				data:{},
				searchData:{},
				pageInfo:{},
				searchPageInfo:{},
				currentPage:0,
				currentSearchPage:1,
				loadMore_status:'more',
				isLodingToast:false,
				isPullLoading:false,
				scrollTop:0
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			changeMarket(e) {
				this.chooseMarket = e
				uni.showToast({
					title: '选择了' + this.finalMarket,
					icon: 'none',
					duration: 1000
				})
			},
			filterList(list, key, value) {
				return list.filter(a => a[key] === value)
			},
			toSearch(e) {
				if (e === '') {
					this.isSearch = false
					this.searchList=[]
				} else {
					this.isLodingToast=true
					this.showLoading()
					this.getlist()
				}
			},
			goClientDetail(item){
				/* uni.navigateTo({
					url:'/pages/myPlace/market/clientList/clientDetail/clientDetail',
				}) */
			},
			getlist(page=1,keyword=this.keyword,token=this.token){
				this.vuexRequest({
					url:'/api/addons/execute?route=agent/my&addon=o-s-mall-dist',
					method: 'GET',
					data: {'access-token':token,'page':page,'keyword':keyword,'per-page':10},
					success:(res)=>{
						uni.stopPullDownRefresh()
						/* this.data=res.data */
						this.pageInfo=res.data.data.pageInfo
						if(page>1){
							this.showList=this.showList.concat(res.data.data.list)
							this.currentPage = res.data.data.pageInfo.currentPage;
						}else{
							this.showList=res.data.data.list;
							this.currentPage = res.data.data.pageInfo.currentPage;
						}
						if(this.isLodingToast){//取消加载
							this.hideLoading()
							this.isLodingToast=false
						}
						if(this.isLodingToast){//取消下拉动作
							uni.stopPullDownRefresh()
							this.isPullLoading=false
						}
						if(this.currentPage>=res.data.data.pageInfo.pageCount){
							this.loadMore_status='noMore'
						}else{
							this.loadMore_status='nome'
						}
					}
				})
			},
			getNextPage(page){
				this.getlist(page)
				this.loadMore_status='loading'
			},
			showLoading(title='正在加载'){
				uni.showLoading({
					title:title
				})
			},
			hideLoading(){uni.hideLoading()},
			call(num){
				uni.makePhoneCall({
				    phoneNumber: num,
						fail(err) {
							console.log(err)
						}
				});
			}
		},
		computed: {
			...mapState(['token']),
			finalMarket() {
				return this.marketList[this.chooseMarket - 1].label
			}
		},
		watch: {
			chooseMarket() {
				let cm = this.chooseMarket - 1
				this.keyword = ''
				this.showList = cm === 0 ? this.clientList : cm === 1 ? this.filterList(this.clientList, 'market_number', cm) : cm ===
					2 ? this.filterList(this.clientList, 'market_number', cm) : this.filterList(this.clientList, 'market_number', cm)
			},
			keyword() {
				if (this.keyword === '') {
					this.isShowEmpty = false
					this.getlist()
				}
			},
			searchList() {
				if (this.isSearch) {
					this.searchList.length === 0 ? this.isShowEmpty = true : this.isShowEmpty = false
				}
			},
			showList() {
				if (!this.isSearch) {
					this.showList.length === 0 ? this.isShowEmpty = true : this.isShowEmpty = false
				}
			}
		},
		onLoad() {
			//this.getlist()
		},
		onShow() {
			this.isLodingToast=true
			this.showLoading()
			this.getlist()
		},
		onReachBottom() {
			this.loadMore_status='loading'
			if(this.currentPage>=this.pageInfo.pageCount){
				this.loadMore_status='noMore'
			}
			this.getNextPage(++this.currentPage)
		},
		onPullDownRefresh() {
			this.keyword=''
			this.isLodingToast=true
			this.getlist(1)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped>
	/**/
	.my_fcolor{
		color: rgba(6, 9, 255,.6);
		
	}
	
	/**/
	
	.client-list-choose-market {
		width: 28%;
	}

	/* #ifdef H5*/
	.client-list-range {
		padding: 20rpx;
		background-color: #e4475a;
		position: sticky;
		top: 88rpx;
		z-index: 10;
	}

	/* #endif */
	/* #ifdef APP-PLUS*/
	.client-list-range {
		padding: 20rpx;
		background-color: #e4475a;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	/* #endif */

	.client-item-level {
		margin-right: 40rpx;
		color: #e32f18;
		font-size: 40rpx;
		font-weight: 500;
	}

	.client-list-level,
	.client-list-register-time {
		padding: 20rpx;
	}

	.client-list-level {
		border-right: 1px solid #d7d7d7;
	}

	.client-item {
		box-sizing: border-box;
		padding: 20rpx;
		border-bottom: 1px solid #d7d7d7;
	}

	.client-item-img {
		width: 15vw;
		height: 15vw;
		border-radius: 3vw;
	}

	.client-item-message {
		box-sizing: border-box;
		padding-left: 20rpx;
		flex: 1;
	}

	.client-item-message-level,
	.client-item-message-register-wrap {
		justify-content: space-between;
	}
	
	.client-item-message-register-wrap,
	.client-item-message-register-time {
		color: rgba(0,0,0,.5);
	}

	.client-list-empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
